asked on

Insert image within UL / LI Area Dropdown Menu

Hey all.

I have this menu that is juuust about complete. I'm trying to mimic the behavior of another menu that has been generated with a WYSIWYG.

The last piece is the ability to insert an image to the right of the links being displayed in a drop down menu. Ideally, when the user hovers over the menu link, the sub menu options appear with X links. To the right of those links I want to display an image.

I've tried inserting a <section> but I can't get it to be visible.

For example, here is the code:

<li class="topmenu">
<a href='' style="height:16px;line-height:16px;">
<span>Option 1</span>
</a>
<ul>
<li><a href=''>Sub Option 1</a></li>
<li><a href=''>Sub Option 1</a></li>
<li><a href=''>Sub Option 1</a></li>
<li><a href=''>Sub Option 1</a></li>
</ul>
<section> IMAGE TO DISPLAY HERE</section>
</li>

Any ideas?

Webspeeder

ASKER

I have this code and although it gets the image, it's not floating to the left of the links.

ul#externalMenuLinks li.topmenu ul:after {
content: url('/explore_icon.png');
float: left;
}

Gary

Not sure what you want.

ul#externalMenuLink li.topmenu ul li:hover {
background: url('/explore_icon.png') no-repeat;
background-position:right center
}

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Webspeeder

ASKER

Using the code below, when you hover over the menu items, a "white" area displays for the drop down with 1 to X links. What I need is to insert an image to the right of those links, within the "white" area.

The white area is one UL element, if I put an image after using the :after, it appends the image to the area but is below the UL.

I was thinking of putting in another UL with one LI that would contain the image, then float the ULs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title></title>
<meta name="description" content="" />

<meta name="viewport" content="width=device-width; initial-scale=1.0" />


<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />


<style type="text/css">
/* --------------------- */
/* BEGIN Navigation Menu */
/* --------------------- */
/***********************/
/* External Menu Links */
/***********************/
body{background-color: #E6E6DC;}
ul#externalMenuLinks,ul#externalMenuLinks ul{
margin:0;list-style:none;padding:0;background-color:#2e5568;border-width:0;border-style:solid;border-color:;}
ul#externalMenuLinks ul{
visibility:hidden;position:absolute;left:0;top:100%;opacity:0;-moz-transition:all 0.5s;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s,visibility 0.5s;transition:opacity 0.5s;background-color:#F8F9F3;border-width:0 1px 1px 1px;border-radius:0 0px 0px 0px;-moz-border-radius:0 0px 0px 0px;-webkit-border-radius:0;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:0px;border-style:solid;border-color:#F8F9F3;padding:0 3px 3px;}
ul#externalMenuLinks li:hover>ul{
visibility:visible;opacity:1;}
ul#externalMenuLinks li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#externalMenuLinks li:hover{
z-index:1;}
ul#externalMenuLinks{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
*display:inline;}
* html ul#externalMenuLinks li a{
display:inline-block;}
ul#externalMenuLinks>li{
margin:0 0 0 0;}
ul#externalMenuLinks ul>li{
margin:10px 0 0;}
ul#externalMenuLinks a:active, ul#externalMenuLinks a:focus{
outline-style:none;}
ul#externalMenuLinks a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:13px Helvetica,Arial,sans-serif;color:#F8F9F3;cursor:pointer;
padding:4px 10px 6px 10px;margin-top: 6px;background-color:#2e5568;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#externalMenuLinks ul li{
float:none;margin:3px 0 0;}
ul#externalMenuLinks ul a{
text-align:left;padding:4px 10px;background-color:#F8F9F3;border-width:1px 0 1px 0;border-style:solid;border-color:#F8F9F3;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 12px Helvetica,Arial,sans-serif;color:#2e5568;text-decoration:none;}
ul#externalMenuLinks li:hover>a,ul#externalMenuLinks li a.pressed{
background-color:#F8F9F3;border-style:none;color:#E79736;text-decoration:none;}
ul#externalMenuLinks span{
display:block;overflow:visible;background-image:url("arrowsubn.gif");background-position:right center;background-repeat:no-repeat;padding-right:19px;}
ul#externalMenuLinks li:hover>a>span{
background-image:url("arrowsub.gif");}
ul#externalMenuLinks ul li:hover>a,ul#externalMenuLinks ul li a.pressed{
background-color:#F8F9F3;border-style:solid;border-color:#F8F9F3;color:#E79736;text-decoration:none;}
ul#externalMenuLinks li.topfirst>a{
background-color:;border-width:1px 1px 0 1px;border-style:solid;border-color:transparent;border-radius:0px 0px 0 0;-moz-border-radius:0px 0px 0 0;-webkit-border-radius:0px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#externalMenuLinks li.topfirst:hover>a,ul#externalMenuLinks li.topfirst a.pressed{
background-color:#FFF;border-style:solid;border-color:#F8F9F3;}

/* Shift left most dropdown to right */
ul#externalMenuLinks li.topfirst ul
{
margin: 0 0 0 5px;
}

/***
ul#externalMenuLinks li.toplast ul
{
margin: 0 100px 0 0px;
border: 1px solid red;
position: absolute;
top: 32px;
right: 32px;
}
***/
/* Set rounded corners */
ul#externalMenuLinks, ul#externalMenuLinks li.topfirst, ul#externalMenuLinks li.topfirst a {
-moz-border-radius-bottom-left: 6px;
-webkit-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
}

#externalMenuLinks ul li.last {
-moz-border-radius-bottom-right: 6px;
-webkit-border-bottom-right-radius: 6px;
border-bottom-right-radius:6px;
border: 1px solid red;
}

#navLinks {
position: absolute;
top: 39px; /* 40 - 1 to prevent pixle rounding errors on resize */
right: 30px;
height: 31px; /* 30 + 1 to make up for the subtracted pixel above */
min-width: 780px;
width: 75%;
z-index: 99;
/* background-color: #2f5568; - green */
background-color: #3F5667; /* blue */
color: #fff;

border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;

border-bottom-left-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
}

/* ------------------- */
/* END Navigation Menu */
/* ------------------- */
</style>
</head>

<body>
<div id="bodyContainer">



<header>

<div id="mainSiteBar">
<nav id="navLinks12" class="shadow" style="margin: 5em 0 0 10em;">
<ul id="externalMenuLinks" class="topmenu" style="">
<li class="topfirst">
<a href="http://menullink/Why+"
style="height:16px;line-height:16px;"><span>Why</span></a>
<ul style="">
<li><a href="http://menullink/Why">Our Story</a></li>
<li><a href="http://menullink/Locations">Locations</a></li>
<li><a href="http://menullink/Videos">Videos</a></li>
<li><a href="http://menullink/Distinct+Advantages">Distinct Advanatages</a></li>
<li><a href="http://menullink/Testimonials">Testimonials</a></li>
</ul>
</li>
<li class="topmenu">
<a href="http://menullink/Dealer+Access"
style="height:16px;line-height:16px;"><span>Access</span></a>
<ul style="">
<li><a href="http://menullink/">About Access</a></li>
<li><a href="http://menullink/Marketing+Tools">Marketing Tools</a></li>
<li><a href="http://menullink/Retail+Tools">Retail Tools</a></li>
<li><a href="http://menullink/Industry+Tools">Industry Tools</a></li>
</ul>
</li>
<li class="topmenu">
<a href="http://menullink/Industry+Resources"
style="height:16px;line-height:16px;"><span>Industry Resources</span></a>
<ul style="">
<li><a href="http://menullink/Sportsman+Magazine">Sportsman Magazine</a></li>
<li><a href="http://menullink/Product+Information+Charts">Product Information Charts</a></li>
<li><a href="http://menullink/Outdoor+Recreation+Resources">Outdoor Recreation Resources</a></li>
<li><a href="http://menullink/State+DNR+Regulations">State DNR Regulations</a></li>
<li><a href="http://menullink/Industry+News">Industry News</a></li>
</ul>
</li>
<li class="topmenu">
<a href="http://menullink/Protect"
style="height:16px;line-height:16px;"><span>Protect</span></a>
<ul style="">
<li><a href="http://menullink/Advocacy+Associations">Advocacy Associations</a></li>
<li><a href="http://menullink/">ACTION</a></li>
</ul>
</li>
<li class="toplast">
<a href="http://menullink/Contact"
style="height:16px;line-height:16px;"><span>Contact</span></a>
<ul style="">
<li><a href="http://menullink/Contact">Contact Us</a></li>
<li><a href="http://menullink/Media">Media</a></li>
<li><a href="http://menullink/Employment">Employment</a></li>
</ul>
</li>
</ul>
</nav>
</div>


</header>

</div>
</body>
</html>

COBOLdinosaur

Using :after you can only set a background like:

ul#externalMenuLinks li.topmenu ul:after {
content:'';
background:url('/explore_icon.png');
}

However it sounds like you are trying to actually add an image in which case you just need to use an image tag inside the ul. if you do use the image background it may get cutoff or be mis-positioned unless you use the other background properties to refine the declaration.

If you are placing an image it may alter the size of the ul and may require alignment.
I think you are making a lot of extra work for yourself with little benefit, when an image can just be used and positioned as a regular background image.

Cd&

skullnobrains

i'd rather suggest a different approach using only CSS and no js

-> first make your menu AND submenu visible and placed where you want it
you'll need to fix your level 1 li's width and height, and add overflow:visible to them
then add the submenu and use position:relative and left/top properties to move it to the left of the main menu
-> then apply visibility:hidden to the submenu
-> then add the following
li.level1:hover ul{ visibility:visible; }
assuming that your level1 lis have the level1 class.

if you need a sample code, i can provide it, but i doubt you'll need it if you give it a try and follow the above steps