By default I have a <ul> that's hidden from view which becomes visible when hovering over the parent <li>. When it does come into view the parent <li> expands its width by 1px. For some reason this only happens when using display:table-cell on the list items, which I'd prefer to keep using given the ability to center vertically. But the 1px jump is unwanted.
<ul class="nav-menu">
<li class="downloads"><a>Downloads</a>
<ul class="downloads-menu">
<li>Download 1</li>
<li>Download 2</li>
<li>Download 3</li>
</ul>
</li>
<li class="about"><a>About</a></li>
<li class="resources"><a>Resources</a></li>
<li class="contact"><a>Contact</a></li>
</ul>
ul.nav-menu {
position: relative;
height: 50px;
width: 100%;
background: black;
color: white;
}
ul.nav-menu > li {
display: table;
float: left;
list-style: none;
height: 50px;
border-right: 1px solid #333;
padding: 0 20px;
}
li a {
display: table-cell;
vertical-align: middle;
}
ul.nav-menu li.downloads:hover ul.downloads-menu {
display: block;
}
ul.downloads-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
height: 250px;
width: 200px;
background: red;
}
I've setup a fiddle here: http://jsfiddle.net/azoc8c4m/1/
ul.nav-menu > li {
float: left;
list-style: none;
height: 50px;
line-height: 50px;
border-right: 1px solid #333;
padding: 0 20px;
}
li a {
}
Related
I have a navigation menu, and the first item replaces the content with an icon. I'm doing this by setting the font-size to 0px of the main element, and then adding an after element. This seems to be a common practice and it works so far so good.
However I can't seem to align the after element with the rest of the navigation menu.
I started playing around with line-height and vertical-align which got me closer to my goal, but as you can see, it's still not properly working as expected.
The fiddle can be found here: https://jsfiddle.net/67dyxLr1/
<nav class="nav-primary">
<ul class="menu">
<li class="menu-item home">Home</li>
<li class="menu-item">Blog</li>
<li class="menu-item">Contact</li>
<li class="menu-item">About Us</li>
</ul>
</nav>
Here is my CSS:
.nav-primary {
background: #CCC;
}
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
}
.nav-primary a {
display: inline-block;
padding: 32px 20px;
border: 1px dashed black; /* border only used for display purpose of alignment*/
margin-right: -4px;
}
.nav-primary a:hover {
background: #FFF;
}
.menu {
width: 100%;
}
.menu-item {
}
.home a {
font-size:0px;
}
.home a:after {
font-family: "dashicons";
content: " \f102";
font-size: 40px;
display: inline-block;
vertical-align: middle;
line-height: 0px;
}
Just add vertical-align: middle to your li
CSS
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
vertical-align: middle;
}
DEMO HERE
You need to add vertical align to your li:
.nav-primary {
background: #CCC;
}
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
vertical-align: middle; /* add this */
}
.nav-primary a {
display: inline-block;
padding: 32px 20px;
border: 1px dashed black;
/* border only used for display purpose of alignment*/
margin-right: -4px;
}
.nav-primary a:hover {
background: #FFF;
}
.menu {
width: 100%;
}
.menu-item {} .home a {
font-size: 0px;
}
.home a:after {
font-family: "dashicons";
content: " \f102";
font-size: 40px;
display: inline-block;
vertical-align: middle;
line-height: 0px;
}
<nav class="nav-primary">
<ul class="menu">
<li class="menu-item home">Home</li>
<li class="menu-item">Blog</li>
<li class="menu-item">Contact</li>
<li class="menu-item">About Us</li>
</ul>
</nav>
I want to vertically align the a links 1-4 under the class dropdown-menu.
In this example I'm trying to do this by displaying the div as a table-row but nothing worked.
CODE
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1ebb90;
overflow: hidden;
}
li {
float: left;
}
li a,
.dropdown-btn {
display: inline-block;
padding: 18px 22px;
}
div {
display: table-row;
}
div a {
display: inline;
vertical-align: middle;
}
<ul>
<li>Home
</li>
<li>About
</li>
<li>Blog
</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>
There are different ways to do it, but one simple way is to use display: block on the links.
(fiddle)
Here's a related question/answer related to how inline vs block work.
[1] Get rid of overflow: hidden on the ul
[2] Make the dropdown absolutely positioned:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
}
[3] Establish the li as the parent.
li {
...
position: relative;
}
[4] Set up a hovering rule over the anchor next to the hidden dropdown menu.
.dropdown:hover .dropdown-menu {
visibility: visible;
}
Demo: https://jsfiddle.net/b3gbowrn/
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin:0;
padding: 0;
background-color: #1ebb90;
}
li {
float: left;
position: relative;
border: 1px solid rgba(0,0,0,0.25);
border-right: none;
}
li:last-child {
border: 1px solid rgba(0,0,0,0.25);
}
.dropdown:hover .dropdown-menu {
visibility: visible;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
}
li a, .dropdown-btn {
display: inline-block;
padding: 18px 22px;
}
div {
display: table-row;
}
div a {
display: inline;
vertical-align: middle;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>
use inline-block in li
change your HTML to be semantically correct to a menu, by using ul li in dropdown
apply to your dropdown position:absolute and top:100% with relative to li
if you want to make it show/hide, you can use :hover in li
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1ebb90;
}
li {
display: inline-block;
vertical-align: top;
position: relative
}
li a,
.dropdown-btn {
display: block;
padding: 18px 22px;
}
li ul {
position: absolute;
top: 100%;
left: 0;
background: red;
display: block;
width: 100%;
text-align: center;
display: none
}
li:hover ul {
display: block
}
<ul>
<li>Home
</li>
<li>About
</li>
<li>Blog
</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li> Link 1
</li>
<li> Link 2
</li>
<li> Link 3
</li>
<li> Link 4
</li>
</ul>
</li>
</ul>
I am developing website and I have a problem,
<li> elements aren't inside <ul>
#category_select {
margin: 0 auto;
width: 97%;
height: 50%;
list-style: none;
text-align: center;
border: 1px solid black;
}
#category_select li {
display: inline;
padding: 10px;
border: 1px solid black;
}
<ul id="category_select">
<li>Naslovnica</li>
<li>Elektronika</li>
<li>Bijela tehnika</li>
<li>Vozila</li>
<li>Sport</li>
<li>Dom i vrt</li>
<li>Odjeća i obuća</li>
<li>Moda</li>
<li>Literatura</li>
<li>Ručni radovi</li>
<li>Igračke</li>
<li>O nama</li>
<li>Kontakt</li>
</ul>
Please try this
#category_select li {
display: inline-block; //change display:inline to display:inline-block
padding:10px;
border:1px solid black;
}
DEMO
I am wanting to align a vertical sub-submenu that is horizontal to a submenu, like this:
I am able to achieve this, as the picture shows, but I have to make the position absolute. The problem with that is I would want the top part of each sub-submenu to line up with the top of the submenu it is attached too. For instance, the artist sub-submenu would be exactly the same as the one shown, but would have A to Z lined up with Artist.
In order to do that the way I am doing it now, I would have to create many different css sections, rather than being able to select multiple submenus with one section (for instance #sortsongmenu, #sortartistmenu { styling }. I would like to find a way to have the sub-submenus in the position shown without having to position each sub-submenu separately, but rather have a styling approach that could apply to all sub-submenus that have relative or some other positioning.
HTML code:
<-- CSS code-->
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu li {
display: block;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}
#sortsongmenu li, #sortartistmenu li{
display: inline;
}
#sortsongmenu li a:hover, #sortartistmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home
</li>
<li>
Search
</li>
<li>
Sort By ▼
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul id="sortsongmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Artist</a>
<ul id="sortartistmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Album</a>
</li>
<li>
<a href='#'>Genre</a>
</li>
<li>
<a href='#'>BPM</a>
</li>
<li>
<a href='#'>Release Date</a>
</li>
</ul>
</li>
<li>
Add Song
</li>
<li>
Contant Us
</li>
</ul>
</div>
</div>
Try:
Change
#sortmenu li {
display: block;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}
to
#sortmenu > li {
display: block;
position: relative;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
top: 0;
width: 100px;
}
EDITED:
Change top to -5px, as your sub submenu have a border top of 5px. It will look better that way.
I am looking for some help resolving an issue im having with positioning the following unordered list elements that are contained in a div which has relative positioning:
The html structure of the UL:
<div id="accountBox" class="account_settings_box">
<ul>
<ul>
<li class="profileImage">
<img src="images/profileimage.jpg" alt="Profile Image" />
</li>
<li class="profileName">Your name</li>
<li class="profileEmail">Your email</li>
</ul>
<li>Messages</li>
<li>Settings</li>
<li>Password</li>
<li>Sign out</li>
</ul>
</div>
and the CSS for this list:
.account_settings_box ul ul {
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
height: 150px;
outline: 1px solid blue;
}
.account_settings_box ul ul li {
display: inline-block;
border: none; /* Reset the border */
}
.profileImage {
float: right;
display: block;
width: 150px;
height: 150px;
outline: 1px solid purple;
}
.profileName, .profileEmail {
width: auto;
height: auto;
width: 150px;
height: 150px;
}
.account_settings_box ul ul li:hover {
outline: 1px solid red;
}
.profileImage img {
width: 150px;
height: 150px;
}
I am having difficultly with the embedded ul, i.e, .account_settings_box ul ul element.
The image below shows what it currently looks like.
I am trying to achieve the follow:
Have the image floating to the right, and have the "your name" and "your email" positioned to the left of the image (basically where they are currently).
Thanks for your help in advance.
Sam :)
Half of your struggles are likely around your first child <ul> element nested below the parent one, which should be contained within its own <li>:
<div id="accountBox" class="account_settings_box">
<ul>
<li>
<ul>
<li class="profileImage"><img src="images/profileimage.jpg" alt="Profile Image" /></li>
<li class="profileName">Your name</li>
<li class="profileEmail">Your email</li>
</ul>
</li>
<li>Messages</li>
<li>Settings</li>
<li>Password</li>
<li>Sign out</li>
</ul>
</div>
From there, I think you want to update your CSS as follows:
.account_settings_box ul {
margin: 0;
padding: 0;
width: 100%;
outline: 1px solid blue;
}
.account_settings_box ul li ul { display: block; }
.account_settings_box ul > li {
display: block;
overflow: hidden;
border: none; /* Reset the border */
}
.profileImage {
float: right;
width: 150px;
height: 150px;
outline: 1px solid purple;
}
.profileName, .profileEmail {
overflow: hidden;
width: 150px;
height: 150px;
}
.account_settings_box ul ul li:hover {
outline: 1px solid red;
}
.profileImage img {
width: 150px;
height: 150px;
}