What it has to look like: Page button with dropdown menu should be opened with hover effect. You mouseover the "Page" button, dropdown menu will appear, the button should be with a dark background, exactly like other buttons "Product " and "Blog" (these two buttons work well in any case). While you are choosing something in the dropdown menu, "Page" button still have the same style (dark background like the last two buttons during hover). Only when the cursor will leave dropdown menu or button, dropdown menu should disappear and "Page" button should be with white background.
Text above describe how the button should work with JavaScript code. JS code makes hover effect, but do something wrong with styles.
Now with JS code "Page" button (while cursor situated at this button and dropdown menu) looks like the active button "Home" with white background. We need to fix this and make the button like in the description above.
Please check out JSFiddle to see what I'm talking about.
Sorry for my English if you'll find some mistakes :)
jsfiddle
HTML
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active uppercase" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="wrapperForDropdomnUpArrow">
<div class="dropdownUpArrow">
</div>
</div>
<a class="dropdown-item uppercase aboutUs" href="#">About us</a>
<a class="dropdown-item uppercase" href="#">Company</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link uppercase outline" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link uppercase outline" href="#">Blog</a>
</li>
</ul>
</div>
CSS
.menu a:hover {
color: #fff;
background: #000;
border-radius: 3px;
transition: 0.4s;
}
.menu a {
font-size: 12px;
font-family: montserrat;
color: #afb0b1;
text-align: center;
padding: 16px 19px;
line-height: 12px;
margin: 0px -5px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: #f3f6f9;
color: #000;
}
.dropdown-menu {
background-color: #000;
padding: 0px;
border: 0;
margin: 1px 0px 0px 0px;
}
.dropdown-menu a {
text-align: left;
padding: 12.5px 69px 12.5px 22px;
line-height: 12px;
margin: 0;
}
.dropdown-menu .aboutUs {
text-align: left;
padding: 20px 69px 12.5px 22px;
line-height: 12px;
}
.dropdown-menu .FAQ {
text-align: left;
padding: 12.5px 69px 20px 22px;
line-height: 12px;
}
a.nav-link.dropdown-toggle:focus {
color: #fff;
background: #000;
border-radius: 3px;
}
jQuery
$(".dropdown-menu").css('margin-top', 0);
$(".dropdown")
.mouseover(function () {
$(this).addClass('show').attr('aria-expanded', "true");
$(this).find('.dropdown-menu').addClass('show');
})
.mouseout(function () {
$(this).removeClass('show').attr('aria-expanded', "false");
$(this).find('.dropdown-menu').removeClass('show');
});
Also I found out that removing of this line
$( this ).addClass('show').attr('aria-expanded',"true");
do some changes, but removing this line is not the full solving
Before. We need to fix it
After
Looks like your problem is with bootstrap and its css.
Take a look at this post and try setting up the bootstrap for you desired colors.
Bootstrap Button active color change
I hope that helps!
Related
I am looking for some (probably easy) advice which I cant seem to find googling. I have a hoverable dropdown menu such as:
/* Dropdown Button */
.btn {
background-color: #D6182D;
color: white;
padding: 8px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
border: 10px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .btn {
background-color: rgb(134, 30, 42);
}
<center>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Chose a month to display</a>
<div class="dropdown-content">
<a class="nav-link" href="/jan">
<font color="black">January 2018</font>
</a>
<a class="nav-link" href="/feb">
<font color="black">February 2018</font>
</a>
<a class="nav-link" href="/mar">
<font color="black">March 2018</font>
</a>
<a class="nav-link" href="/tot">
<font color="black">Total</font>
</a>
</div>
</div>
</center>
Basically taken from w3schools..
Now instead of "Chose a month to display" I would like to display the chosen option once someone clicks on it. Do you guys have any idea on how to change the code to do so?
Looking forward to your answers :-)
I made some changes in your HTML to make it more semantic and for dropdown text, you can try plain javascript. I hope, This will help you.
For old value, you can store your value somewhere, like in localstorage
For Example, I am saving old selected value in local storage.
const months = document.getElementsByClassName("dropdown-content");
if(localStorage.getItem("oldval")){
document.getElementById("dropdownMenuLink").innerHTML =
localStorage.getItem("oldval");
}
Array.from(months).map(month=>{
month.addEventListener("click",(e)=>{
let selectedValue = e.target.textContent;
document.getElementById("dropdownMenuLink").innerHTML =
selectedValue;
localStorage.setItem("oldval",selectedValue);
});
});
const months = document.getElementsByClassName("dropdown-content");
Array.from(months).map(month=>{
month.addEventListener("click",(e)=>{
e.preventDefault();
let selectedValue = e.target.textContent;
document.getElementById("dropdownMenuLink").innerHTML = selectedValue;
});
});
/* Dropdown Button */
.btn {
background-color: #D6182D;
color: white;
padding: 8px;
font-size: 16px;
border: none;
min-width: 200px;
display:inline-block;
text-decoration:none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
border: 10px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
list-style: none;
padding:0;
margin:0;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .btn {
background-color: rgb(134, 30, 42);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<center>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Chose a month to display</a>
<ul class="dropdown-content">
<li><a class="nav-link" href="/jan">
January 2018
</a></li>
<li><a class="nav-link" href="/feb">
February 2018
</a></li>
<li><a class="nav-link" href="/mar">
March 2018
</a></li>
<li><a class="nav-link" href="/tot">
Total
</a></li>
</ul>
</div>
</center>
</body>
</html>
as i can see you are using <div> and <a> to achieve a drop-down which is not wrong at all but is not correct way of html to do it.
Read about <select> and <option> tag which will help you to get a drop-down effect as well as you can set value inside <option> tag dynamically as you click it. by using getElementById('id-of-element')
read about getElementById here
Also if you want some redirection when user clicks it you can use <a> tag inside <option> tag.
select tag
hope this will help you, post any doubts if you have will be happy to help you :-)
I have made a navbar in my html page and added the Bootstrap 4 class sticky-top to it.
The problem is that, it sticks to the top till half of the screen is scrolled, but then the sticky property doesn't work and the navbar goes upward as the page is scrolled.
Why is it happening that it works for limited margin and then suddenly stops working?
I tried to use navbar-fixed-top class,
also I tried position:sticky; top:0; width:100%, but in vain.
My Html for navbar:
<nav class="navbar navbar-expand-lg navigation navbar-fixed-top" style="position:sticky; top: 0; width:100%;" id="bootnavbar">
<div class="container">
<a class="navbar-brand" href="index.php"><i class="fas fa-home"></i></a>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="font-size:0.85em;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="about.php">About</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="boac.php">Board of Advisory Comittee</a></li>
<li><a class="dropdown-item" href="bos.php">Board of Studies</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="admission.php">Admission</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Academic
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item disabled" href="faculty.php">Faculty</a></li>
<li><a class="dropdown-item" href="activities.php">Activities</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="facilities.php">Facilities</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Courses
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="regular_courses.php">Regular Courses</a></li>
<li><a class="dropdown-item" href="short_term_courses.php">Short Term Courses</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.php" role="button" aria-haspopup="true" aria-expanded="false">
Gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="placements.php" role="button" aria-haspopup="true" aria-expanded="false">
Training & Placements
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="alumni.php" role="button" aria-haspopup="true" aria-expanded="false">
Alumni
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="feedback.php" role="button" aria-haspopup="true" aria-expanded="false">
Feedback
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootnavbar.js"></script>
<script>
$(function() {
$('#bootnavbar').bootnavbar();
})
</script>
My CSS for navbar:
.navigation {
background: #020031;
padding: 0px 23px;
font-size: 17px;
z-index: 500;
box-shadow: 0px 10px 15px -9px;
}
.navbar-brand {
color: #fff;
}
.navbar-brand:hover {
color: #fff;
}
.navigation .nav-item .nav-link {
color: #fff;
margin-right: 10px;
padding: 16px;
text-transform: capitalize;
font-weight: 500;
}
.navigation li a:hover {
background: #f6783a;
}
.custom-toggler.navbar-toggler {
border-color: rgb(255, 255, 255);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-switch {
display: none;
}
.nav-section {
background: #020031;
}
.nav-section .nav-right {
float: right;
padding-top: 23px;
}
.nav-section .nav-right a {
color: #fff;
margin-left: 30px;
font-size: 16px;
}
.main-menu {
list-style: none;
}
.main-menu li {
display: inline;
}
.main-menu li a {
display: inline-block;
color: #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 500;
padding: 25px 20px;
margin-right: -5px;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.main-menu li a:hover {
background: #f6783a;
}
.main-menu li.active a {
background: #f6783a;
}
bootnavbar.css
.dropdown-menu {
margin-top: 0;
}
.dropdown-menu .dropdown-toggle::after {
vertical-align: middle;
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
.dropdown-menu .dropdown .dropdown-menu {
left: 100%;
top: 0%;
margin:0 20px;
border-width: 0;
}
.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
background: #007bff;
color: white;
}
.dropdown-menu > li.show > a{
color: white;
}
#media (min-width: 768px) {
.dropdown-menu .dropdown .dropdown-menu {
margin:0;
border-width: 1px;
}
}
bootnavbar.js
(function($) {
var defaults={
sm : 540,
md : 720,
lg : 960,
xl : 1140,
navbar_expand: 'lg'
};
$.fn.bootnavbar = function() {
var screen_width = $(document).width();
if(screen_width >= defaults.lg){
$(this).find('.dropdown').hover(function() {
$(this).addClass('show');
$(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () {
$(this).removeClass('animated fadeIn');
});
}, function() {
$(this).removeClass('show');
$(this).find('.dropdown-menu').first().removeClass('show');
});
}
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
};
})(jQuery);
I just see this question, its late but it might be helpfull for someone else.
Using two container-fluid or container causing that problem.
Example :
<div class="container-fluid">
etc...
</div>
Your navbar will work untill end of the container then stop working.
<main class="container-fluid" role="main">
etc...
</main>
So, your html codes should be like this :
<div class="container-fluid">
etc...
<main role="main">
etc...
</main>
</div>
Use only one container in your site, and all your codes in there.
Changing navbar-fixed-top in fixed-top may be the fix here.
<nav class="navbar navbar-expand-lg navigation fixed-top">
<div class="container">
....
</div>
</nav>
In most cases try to avoid margin-left and margin-right. Border-sizing will not include margin and therefore a design may breakdown. Use padding if possible. Margin-top and margin-bottom is normally no problem in responsive design.
Using Javascript for hover doesn't work when rezing the browser. Try using
/* submenu open on hover, add css animation if you like */
#media (min-width: 768px) {
nav.navigation ul > li:hover > .dropdown-menu {
display: block;
}
nav.navigation ul > li:not(:hover) > .dropdown-menu {
display: none;
}
}
Hell Yeah!!
I solved the problem with different approach.
Since, I had a header above the navbar in my website, I can't do position: fixed,
because this would bring the navbar on top of header when that page is visited and when top:0.
Solution :
I measured the height to which the sticky-top of Bootstrap worked and then just before that height (from top), I applied a media query which changed position: sticky to position: fixed and then navbar came at top when desired.
This was desirable as the header part is gone now.
I know this is just a quick fix, but it works perfectly :)
I have troubles with making an opening mobile version full width of my navigation bar. i tried making it every way possible unsuccessfully with out knowing what my problem is!
i tried to use media but i have no idea what to do to make it looks like the hamburger style that come and goes. i have to mention that i use pure css so i lack of knowledge in JS.
if someone will to help me I will be greathful, because right now i stuck and i dont know what to so about that.
<nav class="navi" id="target">
<div class="menu">
<a class="link-1" href="#">home</a>
<a class="link-1" href="#">info</a>
<a class="link-1" href="#">contact</a>
<div class="logo">
<img alt="Brand" src="logo2.png" height="40px" width="60px">
</div>
</div>
</nav>
this is the css for the navigation:
width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;
text-align:right;
z-index:10;
}
.navi{
background: rgba(0,0, 0, 0.5);
}
.navi:hover{
background-color: rgba(0,0,0, 1);
}
.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;
text-decoration: none;
color:#fff;
padding: 3px 6px;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
thanks a lot!
I would suggest using Bootstrap 3. Go to getbootstrap.com Make sure to include bootstrap's css and javascript pages into your project. The code for your hamburger style nav bar should look something like this:
<div class="container" id="main">
<div class="container">
<div class="navbar navbar-fixed-top navbar-default">
<ul class="nav nav-pills unstyled">
<li class="">Skills</li>
<li>Projects</li>
<li>Contact </li>
</ul>
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
Note: You will only see the hamburger style if you resize your browser window below the breakpoint.
I'm trying to change current tab on a link click. I have something like this:
So when I click on the next or previous link I want to change active tab.
I guess this can be done in JavaScript, but since I'm complete beginner, I can preform only easiest tasks.
This is the HTML used for building this part of page:
<div class="grey-box-wrap">
<div class="top">
<i></i>previous week
<span class="center">February 04 - February 10, 2013 (week 6)</span>
next week<i></i>
</div>
<div class="bottom">
<ul class="days">
<li>
<a href="javascript:;">
<b>Feb 04</b>
<!-- <i>7.5</i> -->
<span>monday</span>
</a>
</li>
<li>
<a href="javascript:;">
<b>Feb 06</b>
<!-- <i>7.5</i> -->
<span>tuesday</span>
</a>
</li>
<li>
<a href="javascript:;">
<b>Feb 06</b>
<!-- <i>7.5</i> -->
<span>wednesday</span>
</a>
</li>
<li class="active">
<a href="javascript:;">
<b>Feb 07</b>
<!-- <i>7.5</i> -->
<span>thursday</span>
</a>
</li>
<li>
<a href="javascript:;">
<b>Feb 08</b>
<!-- <i>7.5</i> -->
<span>friday</span>
</a>
</li>
<li>
<a href="javascript:;">
<b>Feb 09</b>
<!-- <i>0.0</i> -->
<span>saturday</span>
</a>
</li>
<li class="last">
<a href="javascript:;">
<b>Feb 10</b>
<!-- <i>0.0</i> -->
<span>sunday</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row-wrapper">
This is CSS:
.grey-box-wrap .bottom .days li.active a, .grey-box-wrap .bottom .days li:hover a {
color: white;
}
.grey-box-wrap .bottom .days li a {
color: #666666;
}
.grey-box-wrap .top {
height: 40px;
line-height: 40px;
padding: 0 10px;
overflow: hidden;
border-bottom: 1px solid white;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grey-box-wrap .top .prev {
float: left;
}
.grey-box-wrap .top .next {
float: right;
text-align: right;
}
.grey-box-wrap .top .prev, .grey-box-wrap .top .next {
width: 25%;
color: #f1592a;
display: inline-block;
font-weight: bold;
}
.grey-box-wrap .bottom .days li.active, .grey-box-wrap .bottom .days li:hover {
border: solid 1px #f1592a;
}
.grey-box-wrap .bottom .days li {
float: left;
margin-right: 2px;
width: 99px;
padding: 5px;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
border: 1px solid #bdbdbd;
border-bottom: none;
background: white;
}
And this is my attempt to get list elements in JS:
Can someone help me with this, or give me a suggestion on what's the easiest or best way to preform this kind of task?
Thanks!
There are many ways to complete this. I've tried to keep it as simple as possible and have added comments so you can understand each line.
Try something like this with jQuery:
$(document).ready(function() { // check document is ready
$('li a').click(function() { // catch a click on a list link
$('li').removeClass('active'); // remove all current instances of active
$(this).parent().addClass('active'); // add the class active to the item you clicked
});
});
You can view the example here: http://jsfiddle.net/dbr8dxmu/
try
$(".next").click(function () {
var currntIndex = $(".active").index();
if (currntIndex < $(".days>li").length-1) {
$(".active").next("li").addClass("active");
$("li").eq(currntIndex).removeClass("active");
}
});
$(".prev").click(function () {
var currntIndex = $(".active").index();
if (currntIndex) {
$(".active").prev("li").addClass("active");
$("li").eq(currntIndex).removeClass("active");
}
});
DEMO
What you want to do is to call javascript code upon clicking your link which finds out the next element to be highlighted. For example when the link 'Next' which you want to use to change the active tab to the next tab is clicked, your code could look like this:
var tabs = $("days li"); //get all your tabs
var firstTab= $(tabs[0]); //this represents the first tab
tabs.each(function(index){
if($(this).hasClass('active'){
$(this).toggleClass(active);
if(index < tabs.length - 1){
//the active tab has a next tab following it, activate it
$(tabs[index+1]).toggleClass('active');
return false;
} else{
//the last tab was the active tab, so we have to start from the first tab
firstTab.toggleClass('active');
return false
}
}
});
Now you can put this into a function selectNextTab and tell your browser to call this function when your link was clicked. If you have other buttons that are supposed to do the same in a different place just make sure they have the 'next' class.
$(".next").click(function () {
selectNextTab();
});
I have this mobile menu:
As you can see, the <li> tags with the image make the bottom expand a little bit, while "Boxing" which doesn't have any image inside the <li> tag doesn't.
I tried "height: 27px" to the <li> tag. worked perfect. the problem is that when clicking the image - a submenu opens inside the <li> - when defining the height it doesn't expand.
This is how the html list item looks like:
<ul class="sports">
<a href="#" >
<li url="http://google.com">NFL
<img src="strokesmenu.jpg" id="sub-menu" />
<ul class="sports2">
<a href="#" class="selected">
<li>Superbowl</li>
</a>
</ul>
</li>
</a>
// one without an image:
<li> Boxing</li>
and this is my css:
.sports li{
list-style-image:none;
list-style-type: none;
border-bottom: 2px solid #eeeeee;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width:100%;
font-family: arial;
text-decoration: none;
overflow: hidden;
/*height: 27px;*/
z-index: 100;
}
Give Max-height to the image that way it will not get bigger tha tthe li
li > img{
max-height:100%;
}
i hope it works