I'm running into a problem with a CSS submenu I created where the mouse will not highlight the entire submenu bar, but will only highlight an amount relative to the text length.
HTML:
<body>
<div id="page">
<div id="header">
<div>
<ul class="main-nav">
<li>
Menu One
</li>
<li class="nav-primary-middle">
<a href="shops.html" >Shops Listing</a>
<ul class="subnav">
<li>Ice Cream Shop
</li>
<li>Auto Mechanic
</li>
<li>Dentist
</li>
<li>Long Shop Name
</li>
<li>Ace
</li>
</ul>
CSS:
div#page {
width:100%;
}
div#page div#header {
background:url("../images/bg-header.png") no-repeat scroll center bottom transparent;
width:100%;
height:140px;
margin:0 0 90px 0;
}
div#page div#header div {
width:960px;
height:140px;
margin:0 auto;
position:relative;
}
div#page div#header div a.logo {
position:absolute;
left:370px;
top:7px;
display:block;
z-index:999;
}
div#page div#header div ul.navigation {
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:65px;
}
div#page div#header div ul.navigation li {
float:left;
}
div#page div#header div ul.navigation li.middle {
margin:0 170px 0 0;
}
div#page div#header div ul.navigation li.nav-primary-middle {
margin:0 170px 0 0;
}
div#page div#header div ul.navigation li a {
font-family:'didact_gothicregular';
font-size:16px;
color:#b0b6c4;
text-decoration:none;
padding:0 40px;
}
div#page div#header div ul.navigation li a:hover {
font-family:'didact_gothicregular';
font-size:16px;
color:#5b6a9f;
}
div#page div#header div ul.navigation li a.active {
font-family:'didact_gothicregular';
font-size:16px;
color:#5b6a9f;
}
main-nav {
position: relative;
width: 100%;
height: 67px;
background: #f2f2f2;
}
div#page div#header .subnav {
display: none;
position: absolute;
top: 15px;
left: 150px;
width: 205px;
list-style-type: none;
background: #fff;
margin: 0;
border:solid 2px #eeeeee;
border-radius: 10px;
z-index:0;
padding:0;
}
div#page div#header .subnav li {
display: block;
border-bottom: solid 1px #eeeeee;
width: 100%;
margin:0;
}
div#page div#header .subnav li a {
color: #333;
height:48px;
padding:0px 0;
font-size:13px;
}
div#page div#header .subnav li a:hover {
background:#e3e3e3;
width: 215px;
border-radius: 3px;last
}
div#page div#header .subnav2 {
display: none;
position: absolute;
top: 19px;
left: 735px;
width: 205px;
list-style-type: none;
background: #fff;
margin: 0;
border:solid 2px #eeeeee;
border-radius: 10px;
z-index:0;
padding:0;
}
div#page div#header .subnav2 li {
display: block;
border-bottom: solid 1px #eeeeee;
width: 100%;
margin:0;
}
div#page div#header .subnav2 li a {
color: #333;
height:48px;
padding:0px 0;
font-size:13px;
}
div#page div#header .subnav2 li a:hover {
background:#e3e3e3;
width: 215px;
border-radius: 3px;last
}
div#page div#header li:hover .subnav {
display: block;
}
div#page div#header li:hover .subnav2 {
display: block;
}
div#page div#header div ul.main-nav {
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:65px;
}
div#page div#header div ul.main-nav li {
float:left;
}
div#page div#header div ul.main-nav li.middle {
margin:0 170px 0 0;
}
div#page div#header div ul.main-nav li.nav-primary-middle {
margin:0 170px 0 0;
}
div#page div#header div ul.main-nav li a {
font-family:'didact_gothicregular';
font-size:16px;
color:#5b6a9f;
text-decoration:none;
padding:0 40px;
}
div#page div#header div ul.main-nav li a:hover {
font-family:'didact_gothicregular';
font-size:16px;
color:#3f4c7b;
}
div#page div#header div ul.main-nav li a.active {
font-family:'didact_gothicregular';
font-size:16px;
color:#3f4c7b;
}
See the image below as an example of "Dentist" not having a full grey highlight for the entire width of the submenu when you mouse over it:
(Edit, oh, I don't have enough rep to post an image. Please see the JSFIDDLE link, select "Shops Listing" and you can see the submenu not highlighting the entire bar.)
![dropdown menu highlight in gray][1]
Please see this *this jsfiddle link.*
Any help is appreciated, thanks.
you can simply remove the background style from your div#page div#header .subnav li a:hover block. Then, add this
div#page div#header .subnav li:hover{
background:#e3e3e3;
}
Demo
Add the rules below to your CSS.
.subnav { overflow: hidden }
.subnav > li > a { display: block }
Check this fiddle. http://jsfiddle.net/q3xR5/
There is a comment called my edit in there. Please note you need to
adjust paddings on your elements.
Related
I have a big problem and I can't solve it.
I have a top menu with a image on the left and a search box on the right.
I want this search box to stay in the middle, but line-height is not working there... I don't know what to do.
http://jsfiddle.net/5mdz2zp9/
body {
margin: 0;
padding: 0;
//background-color:#eee;
background-color:#F5F6FA;
font-family: 'Open Sans', sans-serif;
font-size:12px;
}
*{
margin: 0;
padding: 0;
list-style: none;
}
#menu {
background-color: rgba(35,35,35,.9);
//border-bottom:1px solid #eee;
position:fixed;
width:100%;
top:0;
margin:0;
//padding: 0;
color: #fff;
text-align: center;
height:50px;
z-index:100;
}
#menu a:link, #menu a:visited, #menu a:hover{
color: #fff;
}
#menu ul{
display:table;
width:100%;
list-style-type: none;
}
#menu li{
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
.right{
text-align:right !important;
padding-right:10px;
}
#menu img{
margin-left:10px;
max-height:40px;
}
.search{
padding-left:10px;
padding-right:10px;
padding-top:4px;
padding-bottom:4px;
border:1px solid #fff;
border-radius:7px;
color:#555;
font-weight:bold;
}
html
<div id="menu">
<ul>
<li><img src="https://infooab.examtime.com/wp-content/themes/learn/img/flashcard_shortcode_icon.png"></li>
<li class=right><form class="searchform"><input type="text" name="search" class="search" placeholder="search"></form></li>
</ul>
</div>
How can I align input in the middle vertically without let image size on the left interfearing?
Thank you friends!
So posting as answer..
Please add this in your css and your box will be in middle..please be in mind when you are using display;table-cell then use vertical-align..hope it will help..:)
#menu li{vertical-align:middle;}
Change this:
#menu ul {
display:table;
width:100%;
list-style-type: none;
}
to this:
#menu ul {
display:table;
width:100%;
list-style-type: none;
height: 100%;
}
and this:
#menu li {
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
to this:
#menu li {
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
vertical-align: middle;
}
Here is the JSFiddle demo
css
#menu li {
border: 1px solid yellow;
display: table-cell;
text-align: left;
vertical-align: middle;
width: 50%;
}
working jsfiddle
I am new to HTML/CSS so please don't hurt me :)
How can I center my navigation? I've researched as much as I can...
CSS:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
width:auto;
height:auto;
text-align:center;
}
#navigation ul li {
display:inline-block;
margin-right:-2px;
position:relative;
}
#navigation ul li a {
display:inline-block;
padding:5px 10px;
background:#ccc;
color:#000;
text-decoration: none;
}
#navigation ul li a:hover {background: #666;}
#navigation ul ul {
position:absolute;
left:0;
width:200px;
transition:all .5s;
max-height: 0;
overflow: hidden;
}
#navigation ul.submenu li {
display:block;
}
#navigation ul.submenu li a {
display:block;
background:#fff;
color: #000;
}
#navigation ul.submenu li a:hover {background: #333;}
#navigation ul li:hover ul {
max-height: 10000px;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
#navigation.center {
display:block;
margin-left:auto;
margin-right:auto;
}
#navigation {
disply:inline-block;
height:50px;
}
HTML:
<div id="navigation">
<ul>
<li>Aperture Science
<ul class="submenu">
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
</ul>
<ul>
<li>Black Mesa
<ul class="submenu">
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
Any help would be great! Thanks!
(Yes, my starter site is on Half Life and Portal)
You can try using below html code and css
HTML:
<div id="navMenu">
<ul>
<li>
Black Mesa
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
<li>
Black Mesa
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
CSS
#navMenu {
margin: 0;
padding: 0;
text-align: center;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
}
#navMenu li {
margin: 0;
padding: 0;
text-align: left;
float: left;
list-style: none;
position: relative;
background-color: #999;
border-radius: 5px;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background-color: #09F;
}
#navMenu ul li:hover ul li a:hover {
background-color: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000;
}
fiddle : http://jsfiddle.net/Khumesh/adx2g1z0/
You need to adjust navigation Div by applying width and setting its margin property using css:
#navigation{
width:50%;
margin:0 auto;
}
Please refer to fiddle for demo
I am new to CSS and I need help with the navigation bar. I need to get the sub-topic right under the ABOUT US part but I cannot get it, it appears all the way to the right. Anything would be appreciated.
I can provide the HTML file if you need.
CSS:
container{
position: relative;
height: 70px;
width: 1100px;
}
.masthead{
background: #039be5;
width: 100%;
top: 0;
position: fixed;
color: white;
}
.logo{
position: relative;
float: left;
left: 90px;
font-family: Josefin Slab;
font-size: 21px;
top: 17px;
}
.logo h1 a {color: white; text-decoration: none; }
h1{
margin: 0;
}
a:link {color: white; text-decoration: none; }
a:visited {color: white; text-decoration: none; }
a:hover {color: white; color: black; }
a:active {color: white; text-decoration: none; }
#navcontent{
word-spacing: 4px;
}
li{
position: relative;
left: 155px;
list-style: none;
font-family: Raleway;
float: left;
margin-left: 21px;
padding-top: 15px;
font-size: 20px;
}
.navigation{
float: right;
}
.navigation ul>li ul{
height: 100%;
position: relative;
bottom: 100%;
}
.navigation ul>li ul>li{
bottom: 0px;
display: none;
}
.navigation>ul>li:hover ul>li{
display: block;
}
.navigation>ul>li a:hover {
text-decoration: none;
cursor:pointer;
}
HTML
<div class="masthead">
<div class="container">
<div class="logo">
<h1> MY SITE</h1>
</div>
<div class="navigation">
<ul>
<li>Courses
</li>
<li>Places
</li>
<li>More
<ul>
<li>Share
</li>
<li> Help
</li>
</ul>
</li>
<li id="navcontent">|| Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</div>
Fiddle
To the point,,
CSS
ul{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
}
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
ul li:hover
{
background:#f6f6f6
}
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
ul ul li
{
float:none;
width:200px
}
ul ul a
{
line-height:120%;
padding:10px 15px
}
ul ul ul
{
top:0;
left:100%
}
ul li:hover > ul
{
display:block
}
Live result here.
Hope this help
UPDATE
Ok, due to what Jon P ask I will describe this code.
Actually the main keys are :
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff; /*remove, no effect*/
padding:0 /*remove, no effect*/
}
First, we make the child(<ul>) become hidden with display: none and give it properties position:absolute, top:100%, left:0; to let it under the MORE link
And then what we want? show it when we hover the MORE link. to do so, just do simple by making that child(<ul>) visible. Of course, we use this property :
ul li:hover > ul
{
display:block
}
I have a menu bar that has three items with drop down menus. When I hover my mouse over the menu bar itself, the drop down menu shows up, but when I move the mouse away to hover over something in the actual drop down menu, it disappears. I assume I'm missing something in my css code, but I'm not sure what. Here's what I have:
body {
background: url(background.jpg);
font-family:Georgia;
margin:10;
padding:10;
}
.main {
width:1000px;
margin:0 auto;
background: #000;
color:#fff;
}
.main > div {
height:200px;
margin:10px;
}
div.bottom {
height:0;
clear:both;
margin:0;
}
.main .head {
height:100px;
color:#fff;
line-height: 100px;
}
h1 {
font-size: 30px;
font-weight: bold;
margin:0;
}
h5 {
color:#000;
}
.main .page {
min-height:500px;
height:auto;
}
.main .foot {
height:70px;
text-align: center;
line-height: 70px;
}
.span_1 {
width:800px;
}
.span_2 {
width:990px;
}
div.menu {
height:50px;
line-height: 50px;
background:#000;
color:#fff;
}
.menu a:link,
.menu a:visited {
color:#000;
text-decoration: none;
padding:0 10px;
}
.menu ul,
.menu li,
.menu h5,
.menu .mega-drop {
list-style:none;
margin: 0;
padding: 10;
background:#fff;
}
.menu li {
position: relative;
}
.menu > ul > li {
float:left;
border-right:solid 1px;
}
.menu > ul > li > ul {
position: absolute;
left:0;
top:60px;
width:400px;
z-index:1;
display:none;
}
.menu > ul > li > .mega-drop {
position: absolute;
left:0;
top:60px;
z-index:1;
width:400px;
display:none;
}
.menu > ul > li > .mega-drop > .mega-drop-column {
float:left;
width:200px;
}
.menu > ul > li > ul > li > ul {
position: absolute;
left:400px;
top:0;
width:400px;
z-index:1;
display:none;
}
.menu li:hover {
background: #3f0;
}
.menu li:hover > ul,
.menu li:hover > .mega-drop {
display: block;
}
you have to do something like this
<div id="menubar"> <- here is your hover to show the menu
<div id="navpoint1">...</div>
<div id="navpoint2">...</div>
<div id="navpoint3">...</div>
...
</div>
now you are "the whole time" hover 'menubar' and the dropdown will not dissappear
This happened to me and tried several methods. I altered the following code and worked a charm! It was strange because it only happened on the index page!!
Was this...
#nav li ul {
width:100%;
margin:0;
padding:0;
display: none;
position: absolute;
top: 100%;
background-color: #39F;
background: rgba(51, 153, 255, .9);
}
Changed to...
#nav li ul {
width:100%;
margin:0;
padding-top:.2em;
display: none;
position: absolute;
top: 100%;
background-color: #39F;
background: rgba(51, 153, 255, .9);
z-index:99999;
}
this is what I have
http://jsfiddle.net/ftKw5/
/* CSS element classes */
#font-face {
font-family:'myriad-webfont';
src: url('webfont/myriad-webfont.ttf') format('truetype'), url('webfont/myriad-webfont.svg#myriad_webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: myriad-webfont;
color: #000000;
background: url('img/silk_pat#2x.png');
letter-spacing: 2px;
}
h2 {
;
font-size: 3;
}
::-webkit-input-placeholder {
color:#222222;
opacity:0.1;
}
/* CSS element IDs */
#outer-wrapper {
width: 50em;
margin: 1em auto;
background-position:inherit;
border: 2px solid #dcdcdc;
border-radius: 1.5em;
position:relative;
background-color: #ffffff;
}
#surtitle {
border-bottom: 1px solid #dcdcdc;
text-align: center;
opacity: 0.3;
font-size:15px;
letter-spacing: 7px;
}
#topnavbar {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
opacity: 0.5
}
/* Dropdown */
.nav {
padding-top:-10;
height:36px;
background:#aaa;
color:#fff;
text-shadow:1px 1px #888;
z-index:400
}
.menu a {
float:right;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px
}
.menu span {
float:right;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px
}
.menu a:hover {
color:#fff
}
.menu {
list-style:none;
font:10px;
text-align:center;
width:600px;
margin:0;
}
.menu li {
position:relative;
float: right;
width:120px;
z-index:400
}
.menu ul {
margin:0;
padding:0;
outline:0;
display:none;
position:absolute;
font:10px;
top:36px;
left:0;
background:#aaa;
display:none;
list-style:none
}
.menu ul li {
float:none;
border-top:1px solid #ccc;
width:120px
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
background:#999;
color:#fff
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px
}
.menu ul ul {
left:120px;
top:0
}
.menu li.submenu {
}
.menu li.noborder {
border-top:none
}
li.menuhover a, li.menuhover li.menuhover a {
color:#fff;
background:#999
}
li.menuhover span, li.menuhover li.menuhover span {
color:#fff;
background:#999
}
For some reason, when I run it, it won't hug the top etc. I added the jsfiddle so that it's a little better to read and you can see the html to go with it.
If i am understanding your questio0n correct the below css will help you.
CSS:
body {
font-family: myriad-webfont;
color: #000000;
background: url('img/silk_pat#2x.png');
letter-spacing: 2px;
padding:0; // it will remove padding from body tag
margin:0; // it will remove margin from body tag
}
Answer of new requirement in comments (Menu shoul be center of top bar ):
.menu {
list-style: none outside none;
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 368px;
}
.menu li {
float: left;
width: 120px;
z-index: 400;
}