PDA

View Full Version : Drop Down Menu Border



weaksauce
Jan 16th, 2009, 09:06 PM
I'm using a standard drop down menu with css and a ie6 back up JS. I want the drop down menu to have a border, but I've noticed that borders are in styles like window edges with slants in the corner. I'm trying for it just be a straight box.

A border-top red that matches the background, then the rest black without the slants on the borders.


<!-- Begin Header -->
<div id="header">
<img src="header.jpg" width="800" height="101" border="0"/>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Find Properity</a>
<ul>
<li><a href="#">View All Property</a></li>
<li><a href="#">Search Listings</a></li>
</ul>
</li>
<li><a href="#">OCH Office</a></li>
<li><a href="#">Municipal/Utilities Info.</a></li>
<li><a href="#">Emergency Numbers</a></li>
<li><a href="#">Student Rights</a></li>
<li><a href="#">Student/Landlord Login</a></li>
</ul>
</div>


#header {
width: 800px;
height: 122px;
margin: 0 auto;
background: center no-repeat #e32225;
color:#FFFFFF;
border-bottom:#000000 2px solid;
}
/* Drop Down Menu */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
color:#FFFFFF;
font-size:10pt;
text-decoration:none;
display: block;
}
#nav a:hover {
text-decoration:underline;
}
#nav li {
float: left;
padding: 4px 9px 0px 9px;
}
#nav li ul {
position: absolute;
width: 9em;
list-style:none;
left: -999em;
background-color: #e32225;
border: #000000 solid 2px;
border-top: #3366FF solid 3px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

BoldUlysses
Jan 16th, 2009, 10:00 PM
borders are in styles like window edges with slants in the corner

Where are you seeing these slants? Here's a screenshot from FF3:

http://www.sufferndesign.com/helping/site116.jpg

weaksauce
Jan 21st, 2009, 08:28 PM
if you zoom in on the blue border, you'll see slants on the corners of the border... its like a window or picture frame: two 45 degree angles (45 from top piece, and 45 from side piece) come together to make the 90 degree corners

BoldUlysses
Jan 21st, 2009, 08:44 PM
Ah. Well, here's one way:

HTML:


<div id="header">
<img src="header.jpg" width="800" height="101" border="0"/>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Find Properity</a>
<ul>
<div class="menu_top"></div>
<li><a href="#">View All Property</a></li>
<li><a href="#">Search Listings</a></li>
</ul>
</li>
<li><a href="#">OCH Office</a></li>
<li><a href="#">Municipal/Utilities Info.</a></li>
<li><a href="#">Emergency Numbers</a></li>
<li><a href="#">Student Rights</a></li>
<li><a href="#">Student/Landlord Login</a></li>
</ul>
</div>

CSS:


#nav li ul {
position: absolute;
width: 9em;
list-style:none;
left: -999em;
background-color: #e32225;
border: #000 solid 2px;
border-top: none;
}

.menu_top {
height:3px;
background-color:#3366FF;
margin-left:-2px;
margin-right:-2px;
}

Checks out in Safari, FF3; haven't checked IE.