I have a drop down menu which is appearing behind my image transition gallery div. Below is the image of what it looks like and the HTML and CSS for it.
HTML:
<body>
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></div>
<div class="nav">
<ul class = "menu" >
<li> <a href = "#" > Home </a> </li>
<li><a href = "#" > Packages </a>
<li><a href = "#" > Weddings </a>
<li><a href = "#" id="left" > Lifestyle </a>
<ul class = "submenu" >
<li> <a href = "#" > Families </a> </li>
<li> Newborn/Child </li>
<li> <a href = "#" > Portraits </a> </li>
</ul>
</li>
<li> <a href = "#" > Blog </a> </li>
<li> Abous Us
<ul class = "submenu" >
<li> <a href = "#" > Ed Osborne </a> </li>
<li> <a href = "#" > Testimonials </a> </li>
<li> <a href = "#" > FAQs </a> </li>
</ul>
</li>
<li> <a href = "#" > Contact Us </a> </li>
<li> <a href = "#" > Links </a> </li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="smart-gallery">
<a href="images/cubagallery-img-1.jpg">
<img src="images/cubagallery-img-1.jpg" /></a>
<a href="images/cubagallery-img-15.jpg">
<img src="images/cubagallery-img-15.jpg" /></a>
<a href="images/cubagallery-img-3.jpg">
<img src="images/cubagallery-img-3.jpg" /></a>
<img src="images/cubagallery-img-4.jpg" /></a>
</div>
</div>
CSS:
.min-gallery
{
width: 927px;
height: 615px;
border: solid 1px black;
background-color: Black;
background: url(../images/bg.jpg);
margin: auto;
margin-left: 232px;
}
.min-gallery .preview
{
width: 852px;
height: 493px;
margin-top: 36px;
margin-left: 36px;
margin-right: 36px;
position: relative;
border: solid 2px black;
overflow: hidden;
background-color: White;
}
.min-gallery .preview img
{
/* width: 795px; height: 525px;*/
position: absolute;
}
.min-gallery .bottom
{
width: 100%;
height: 98px;
color: Gray;
font-family: Arial;
font-size: 1em;
font-weight: bold;
overflow: hidden;
}
#top_bar {
width: 100%;
height: 145px;
background: #000000;
padding-bottom: 20px;
}
#top_inner {
text-align: center;
margin: 0 auto;
width: 1000px;
height: 144px;
}
.nav {
margin: 0 auto;
position: relative;
padding-top: 100px;
}
ul.menu {
list-style: none;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
position: relative;
}
ul.menu li a{
padding: 10px 18px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a#left{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover {
background: url(../images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 11px;
height: 35px;
float: left;
background: url(../images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {
background-position: center bottom; cursor: pointer;
}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 122px;
padding-left: 30px;
text-align: left;
}
When I remove position:absolute from .min-gallery .preview img, the drop down menu appears on top which is how I want it but the images do stop changing and just stick on one image.
Anyone got a quick fix? Sorry about the pasting of all the code but I dont know how else I can express my point to you guys
Thanks
set the higher z-index of drop down menu .
.submenu { z-index: 999; }
reason "An element with greater stack order is always in front of an element with a lower stack order."
Use a z-index for your drop down menu.
.submenu { z-index: 1; }
Also, as a side note, if you are using prefixed properties you should also use the spec property as well which should appear last after the vendor specific prefixes. Example:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
When a vendor supports the standard property, you don't have to change your code.
Find the overflow property in the parent or in the child element and remove the overflow property.
You are welcome
Use
.submenu { z-index: 1;position :relative}
Related
I have an unordered linked list. I'm trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can't see it anymore or it's not on the right side of the page. Here is the HTML:
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks!
Assuming you're looking to move your .order element, you'll want to apply the float: right rule to the parent (<li>) element. I've added a class to this, .order-container, to make this easier to achieve in the following example.
Note also that once you float to the right, it will be off the screen by default. You'll want to set a negative margin-right to circumvent this. I've gone with margin-right: -10em in the following, to match the offset from the image on the left.
Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
float: right;
}
.order-container {
float: right;
margin-right: 10em;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="order-container">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
MDN still advises that <div> is not a valid child of <ul>. Furthermore float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex
/*Normalise body*/
body {
margin:0;
}
/*Set flex on the nabar top position logo and links*/
.navbar {
display: flex;
}
/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
margin-left: 5em;
}
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
/*Ad flex to the nav link element*/
display: flex;
/*Vertically center the links*/
align-items:center;
}
/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
margin-left: auto;
margin-right:1em;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
}
.navbar a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
You should use media queries for making navbar responsive.
a {
text-decoration: none;
color: black;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
border-bottom: solid 1px black;
}
.div-links {
display: flex;
align-items: center;
width: 70%;
}
.nav-links {
width: 100%;
display: flex;
justify-content: end;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-links li {
padding: 2rem;
}
.nav-items {
width: 30%;
display: flex;
justify-content: space-around;
}
.order {
overflow: hidden;
color: #ffffff !important;
background: #1419e2;
text-decoration: none;
padding: 0.8rem;
border-radius: 5px;
}
<div class="navbar">
<a href="glacier_hills.html">
<img
src="Images/Glacier-Hills-Logo.svg"
alt=""
width="182"
height="90"
/>
</a>
<div class="div-links">
<ul class="nav-links">
<div class="nav-items">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="btn">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
</div>
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: right;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
margin-top: 18px;
margin-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
}
#btn {
margin-top: 30px;
color: white;
display: flex;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
I'm trying to make this web application using AngularJS and I am fairly new to it. I am making a navigation bar for a page to start with and I think I have done the normal bar properly. However I want to also add a search bar (haven't done the functioning yet since I have no idea how to) which will appeal when the mouse hovers over the <a> tag . I'm referring to a video which will be linked below. The difference is he is not using a navigation bar instead doing it in the middle of the video
The css and html is shown below.
The video I am referring to is this: https://www.youtube.com/watch?v=v1PeTDrw6OY
PS: what I want to do is include the icon inside the gray padding area so I can set the padding to zero and it would have the icon inside the padding alone and on hover I could expand the search bar field and let the user type. Any input regarding this is highly appreciated. Thank you
You need to have a common parent element to make it easier on yourself. With your HTML the most straightforward way would be to include the <a> into the <li>, instead of having it after. So turn this
<li><input type="text" id="searchbar" placeholder="Search Here"> </li>
<a class="search-btn" href="#"> <i id="btn" class="fas fa-search"></i> </a>
Into this:
<li>
<input type="text" id="searchbar" placeholder="Search Here">
<a class="search-btn" href="#"> <i id="btn" class="fa fa-search"></i> </a>
</li>
Then you can use position: absolute and easily place the icon where you want by adding this CSS:
li {
position: relative;
}
li input + a {
position: absolute;
top: 4px; /* change this */
left: 5px; /* change this */
}
using search-bar class, you can get what you want
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: left;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
background: transparent;
outline: 0;
border: 0;
color: #fff;
position: absolute;
right: 10px;
top: 38px;
bottom: 0;
margin: auto 0;
line-height: 100%;
display: inline-block;
line-height: 100%;
display: block;
height: 22px;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
.search-bar{
position: relative;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="Main">
<div id="navbar">
<ul>
<li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
<li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li>
<div class="search-bar">
<input type="text" id="searchbar" placeholder="Search Here">
<button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
</div>
</li>
</ul>
</div>
</div>
W3Schools
Hello,
I've been trying to integrate a drop down menu based upon the hover over function of an image. I've gone to the above website which gives an example, but I cannot figure it out. Below is my current HTML. The image I would like to have the hover over function work on and from that have a drop down menu is the Logo.png file. I simply cannot figure out how to integrate this into my code. Any direction or help would be appreciated.
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logopic {
height: 100px;
width: 140px;
}
#logo {
float: left;
margin: 1%;
width: 160px;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
float: left;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
#topsection {
padding-top: 150px;
}
ul li {
list-style-position: inside;
}
<div id="menu">
<div id="logodiv">
<a href="index.html">
<img id="logo" src="images/Logo.png">
</a>
</div>
<div id="menulinks">
<ul id="options">
<a href="#income">
<li class="menuoptions">INCOME</li>
</a>
<a href="#expenses">
<li class="menuoptions">EXPENSES</li>
</a>
<a href="#incomedistribution">
<li class="menuoptions">INCOME DISTRIBUTION</li>
</a>
<a href="#spending">
<li class="menuoptions">SPENDING</li>
</a>
<a href="#sidemenu">
<li class="menuoptions">SIDE MENU</li>
</a>
</ul>
</div>
</div>
Use the sibligns selector "+"
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logopic {
height: 100px;
width: 140px;
}
#logo {
float: left;
margin: 1%;
width: 160px;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
float: left;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
#topsection {
padding-top: 150px;
}
ul li {
list-style-position: inside;
}
#menulinks {
display: none;
}
#logodiv:hover + #menulinks {
display: block
}
<div id="menu">
<div id="logodiv">
<a href="index.html">
<img id="logo" src="images/Logo.png">
</a>
</div>
<div id="menulinks">
<ul id="options">
<a href="#income">
<li class="menuoptions">INCOME</li>
</a>
<a href="#expenses">
<li class="menuoptions">EXPENSES</li>
</a>
<a href="#incomedistribution">
<li class="menuoptions">INCOME DISTRIBUTION</li>
</a>
<a href="#spending">
<li class="menuoptions">SPENDING</li>
</a>
<a href="#sidemenu">
<li class="menuoptions">SIDE MENU</li>
</a>
</ul>
</div>
</div>
Germano Plebani > I believe it won't work, because when you stop hovering the logo, the menu will disappear again.
I changed your code a bit to make it a bit more simple (at least, in my opinion) :
<div id="menu">
<ul>
<li id="logo"><img src="your_path"></li>
<li class="menuoptions">INCOME</li>
<li class="menuoptions">EXPENSES</li>
<li class="menuoptions">INCOME DISTRIBUTION</li>
<li class="menuoptions">SPENDING</li>
<li class="menuoptions">SIDE MENU</li>
</ul>
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logo {
height:140px;
}
#logo img{
width:160px;
}
ul{
height:inherit;
width:160px; /* Your menu has the size of your logo */
}
ul:hover {
width:auto; /* when you hover your menu, it will take 100% of the width of it's container */
}
ul li {
float: left;
list-style:none;
}
ul:hover .menuoptions {
display:block;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
display:none;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
I didn't go for optimization neither, but it works fine.
I'm new in HTML and CSS.
Want to create menu with image and also want to show menu separator, menu should be horizontally aligned.
when we hover mouse on menu item, image and text color should change.
It should be look like as per image.
sry I forgot to upload the code, uploading here.
but now I want to show some menu items on left side( left align) and others on right side( right align)
.mainmenu{
background-color: black;
}
.mainmenu {
margin-top: 20px;
display: inline-block;
position: relative;
width: 100%;
}
.mainmenu li a {
display: block;
position: relative;
text-decoration: none;
text-align: center;
font-size: 10px;
color: gray;
line-height: 32px;
font-weight: bold;
text-shadow: black 0 1px 0;
font-family: sans-serif;
border-right: 1px solid #030304;
border-left: 1px solid #36393C;
white-space: nowrap;
}
.mainmenu ul.menu {
margin: 0;
width: 100%;
}
.mainmenu ul.menu li {
float: left;
list-style: none;
width: 16.666666666666668%;
}
.mainmenu ul.menu li a:hover {
color: #76b900;
}
img {
border: 0;
vertical-align: middle;
max-width: 100%;
}
<div>
<div class="mainmenu ">
<ul class="menu">
<li>
<a href="#">
<img src="images/nav-icons/home.png">HOME</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/users.png">
USERS
</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/gallary.png">
GALLARY
<a/>
</li>
<li>
<a href="#">
<img src="images/nav-icons/community.png">
COMMUNITY
</a>
</li>
</ul>
</div>
Thanks
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px;
/* To sift text off the background-image */
color: #3E789F;
background: url("../images/mySprite.png") no-repeat;
/* As all link share the same background-image */
}
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}
<ul class="menu">
<li class="firefox">Firefox
</li>
<li class="chrome">Chrome
</li>
<li class="ie">Explorer
</li>
<li class="opera">Opera
</li>
<li class="safari">Safari
</li>
</ul>
I have created a navigation menu which uses javascript. I have drop down menus in parts of the main menu but when I click on the arrow it only displays the drop down up to the end of the div (see image):
How can I get it so that the drop down appears on top. I have tried overflow: visible but this doesnt seem to work.
HTML:
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <img src="images/logo.gif" alt="Ed Osborne" width="220" height="100" class="logo"></div>
<div class="nav">
<ul class = "menu" >
<li> <a href = "#" > Home </a> </li>
<li><a href = "#" > Tutorials </a>
<ul class = "submenu" >
<li> <a href = "#" > CSS </a> </li>
<li> Javascript </li>
<li> <a href = "#" > jQuery </a> </li>
<li> HTML </li>
<li> <a href = "#" > PHP </a> </li>
</ul>
</li>
CSS:
.nav {
margin: 0 auto;
position: relative;
padding-top: 85px;
}
ul.menu {
list-style: none;
padding: 0 22px;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(../images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
You need to use Z-index in the submenu tag
ul.menu li ul.submenu {
z-index: 5000; // <-- ADD THIS
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
---- EDIT based on your comment below----
Wait - I think we are misunderstating you based on your comment- you want the submenu moved UP so it's above the existing menu? (as opposed to above the content on the page?) If so you need to do a negative margin-top on the submenu like this:
ul.submenu {
margin-top:-2em; // adjust me (use 'em' to scale w/ font size adjustments)
}
you need "position: absolute; " for this to work but you already have it on this class in your CSS
I believe the answer is z-index, but z-index only works on positoned elements. It shoukd work if you add
ul.menu li ul.submenu {
z-index: 5000;
position: relative;
}
Make sure that your overflow setting is set to :show.
I was having this same problem when I saw that mine was set to hidden.