Background For Navigation Element Not Filling Entire Space


Background For Navigation Element Not Filling Entire Space



StackOverflow Community!



I have a problem with my Website where I am hovering over an item on my navigation bar, and it doesn't cover the full spot I intend for it to cover. For those moderators who keenly notice that this question is answered Here and Here as well, it isn't applicable in my situation since one is a span tag, and the other is a vertical dropdown, not a horizontal navigation bar. Attached below is a screenshot of the problem.



Not filling total space by height and widthThe effect I intend is to get the background right to the edge of the top and bottom, and pushing the background to the edge of the right and left



I've tried playing around and looking online, but the answer that is most consistent is:


display: block



Which would mess up the flow of the navigation bar if I were to implement it. Can someone point me in the right direction?



CSS used to style the nav bar and it's elements:


nav {
text-align: center;
background-color: black;
}

nav ul {
list-style-type: none;
padding: 10px;
}

nav li {
display: inline-block;
transition: background-color 0.3s ease-in-out 0s;
}

nav li:hover {
background-color: lightgrey;
}

nav a {
text-decoration: none;
color: white;
}



NOTE:The issue is with me adding some padding to the ul element, I understand that. I am just not sure how to circumvent it without screwing the navigation bar


ul




1 Answer
1



Just put the padding on the li instead.


li




nav {
text-align: center;
background-color: black;
}

nav ul {
list-style-type: none;
}

nav li {
display: inline-block;
transition: background-color 0.3s ease-in-out 0s;
padding: 10px;
}

nav li:hover {
background-color: lightgrey;
}

nav a {
text-decoration: none;
color: white;
}


<nav>
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
</ul>
</nav>





maybe also throw in a nav li { cursor: pointer; }
– MiXT4PE
Jun 29 at 21:50



nav li { cursor: pointer; }





@Paul Abbot. Thank you for the answer. If you don't mind, could you edit your answer with an explanation as to why this works, and why the old code wasn't working. I understand if you don't want to. Until your response, I'll leave this answer upvoted, but not as the final answer
– Mansoor Ahmad
Jun 29 at 21:53






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more