PDA

View Full Version : Help with :: Flex Level Popup Menu (v1.2)



coolbreze71
07-18-2014, 05:38 PM
1) Script Title: :: Flex Level Popup Menu (v1.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/popupmenu.htm

3) Describe problem: I would like to add a Horizontal divider line that shows between the selections in the dropdown box for improved readability. How can I do this. Thank-you. :)

vwphillips
07-19-2014, 08:21 AM
it is all in the CSS (see lines in red)



.jqpopupmenu, .jqpopupmenu ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}


.jqpopupmenu li{
position: relative;border-Bottom:solid black 1px;
}

.jqpopupmenu li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: #F5F5F5;
text-decoration: none;
padding: 4px 5px;
}

* html .jqpopupmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.jqpopupmenu li a:hover, .jqpopupmenu li.selected>a{
background: #e0e0e0;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}




<!--HTML for popup Menu 1-->
<ul id="popmenu1" class="jqpopupmenu">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li style="border-Width:0px;" ><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li style="border-Width:0px;"><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li style="border-Width:0px;"><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li style="border-Width:0px;" ><a href="#">Item 6a</a></li>
</ul>