homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Curved Corner on DropDown menu

Msg#: 4420338 posted 4:13 am on Feb 22, 2012 (gmt 0)

Hi, i have a dropdown menu and i want to have a curve corner at the bottom if the dropdown, i've used image so that it will work on ie7 and 8,

but i cant figure out whats wrong on my codes.

#menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block ; float:left; z-index:1000; }
#menu a { color:#fff; text-decoration:none; }
#menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
#menu > li a:hover {color:#B0D730;}
#menu .menu_2 {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
/* sub-menus*/
#menu ul { padding:0px; margin:0px; display:block; display:inline;}
#menu li ul { position:absolute; right:2px; top:9px; margin-top:45px; width:auto; line-height:16px; background-color:#f7f6f6; color:#404040; z-index:1 !important; /* for IE */ display:none; }
#menu li:hover ul { display:block;}
#menu li ul li{ display:block ; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; }
#menu li ul li:first-child { border-top: none; }
#menu li ul li a { display:block; color:#404040; }
#menu li ul li a:hover { color:#000000; }
/* main submenu */
#menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
/* search */
.searchContainer div { background-color:#fff; display:inline; padding:5px;}
.searchContainer input[type="text"] {border:none;}
.searchContainer img { vertical-align:middle;}
/* corners*/
#menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
#menu .corner_inset_right { position:absolute; top:0px; left:150px;}
#menu .last { background:transparent none repeat scroll 0% 0%; margin:0 auto 0 0; padding:0px; border:none; position:relative; border:none; height:0px; width:100%;}
#menu .corner_left { position:absolute; left:0px; top:0px; float:left}
#menu .corner_right { position:absolute; top:0px; float:right}
#menu .middle { position:absolute; left:18px; height: 20px; width: auto; top:0px;}

thats my css dropdown menu


[edited by: alt131 at 6:13 am (utc) on Feb 22, 2012]
[edit reason] Thread Tidy [/edit]



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4420338 posted 8:05 am on Feb 23, 2012 (gmt 0)

Hi ansokclifford and welcome to css,

Can you be a bit more specific about what is "wrong". Also, there isn;t a background-image in the css - does that mean the image is coded into the HTML? If so, can you post a short HTML snippet.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved